<!-- 添加朋友 -->
<template>
	<view class="bd">
		<!--搜索框start-->
		<view class="search-bar">

			<uni-section title="基本用法" type="line">
				<uni-search-bar @confirm="search" :focus="true" class="search" cancelButton="none">
				</uni-search-bar>

			</uni-section>

		</view>
		<!--搜索框end-->

		<!-- 展示搜索出来的列表 -->
		<view class="AddItemList" v-for="(item, index) in getSearchUser" :key="index">
			<view class="AddItem">

				<view @click="gotoUrl(`/pages/userhome/userhome?id=${item.id}`)">
					<image v-if="item.avatarurl" :src="item.avatarurl" class="ItemPic" mode="aspectFill"></image>
					<image v-else src="../../static/user.png" class="ItemPic" mode="aspectFill"></image>
				</view>

				<text class="ItemName"
					@click="gotoUrl(`/pages/userhome/userhome?id=${item.id}`)">{{ item.nickname }}</text>

				<view class="ItemAddBtn" @click="addThisFriend(item.id)">添加</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		addFriend,
		partnerList,
		getPersonById
	} from '@/config/api.js'

	import {
		gotoUrl
	} from '../../utils'

	export default {
		data() {
			return {
				gotoUrl,

				findInfo: '',
				//搜索内容(也就是搜索的id)

				formdata: {}, //comment：String，frdId：Int

				getSearchUser: [{
					"avatarurl": "../../static/chuti.jpg",
					"city": "",
					"gender": 0,
					"hobby": "",
					"id": 0,
					"nickname": "用户名",
					"province": "",
					"userBirthday": ""
				}],
				getSearchUser: [],
			}
		},
		methods: {

			// 点击添加按钮
			async addThisFriend(friendId) {
				console.log("searchId" + friendId)
				uni.showModal({
					editable: true,
					confirmText: '添加',
					placeholderText: '输入留言添加好友',
					success: async function(res) {
						if (res.confirm) {
							console.log('输入的文本内容：', res.content);
							console.log('用户点击确定');
							var formdata = {}
							formdata.comment = res.content,
								formdata.frdId = friendId
							try {
								let res = await addFriend(formdata)
								console.log("addFriend()=>" + res)
								uni.showToast({
									title: '添加好友成功',
									duration: 2000
								});
							} catch (err) {
								console.log("addFriend().err->" + err)
								uni.showToast({
									title: '添加好友失败',
									duration: 2000
								});

							}

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})
			},

			async search(name) {
				console.log("searching for user:", name.value)
				try {
					let res = await getPersonById(name.value);
					this.getSearchUser = res;
					console.log("got user search list:", this.getSearchUser);

				} catch (error) {
					console.error('Error addingFriends->', error);
				}
			},
		}
	}
</script>

<style>
	.ItemAddBtn {
		color: white;
		padding: 16rpx 24rpx;
		text-align: center;
		border-radius: 20rpx;

		background-color: rgb(57, 151, 213);
	}

	.ItemName {
		flex: 1;
		text-align: center;
		font-weight: bold;
	}

	.ItemPic {
		display: block;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.AddItem {
		box-sizing: border-box;
		padding: 16rpx;
		width: 95%;
		margin: 0 auto 15rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		background-color: white;
	}

	.search {
		border-radius: 5%;
	}

	.uni-search-bar {
		border-radius: 10%;
	}

	.bd {
		height: 100%;
		width: 100%;
		background-color: rgb(245, 245, 245);
	}
</style>